<template>
  <view class="feedback-item">
    <view class="header">
      <wd-img round :width="50" :height="50" :src="avatar" />
      <view class="nickname">{{ nickname }}</view>
    </view>
    <view class="info">
      <view class="feedback-content">{{ content }}</view>
    </view>
    <view class="footer">
      <view class="ml-4">
        <wd-button type="text" icon="thumb-up">{{ likes }}</wd-button>
      </view>
      <view class="date mr-4">{{ date }}</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineProps({
  avatar: String,
  nickname: String,
  content: String,
  likes: Number,
  date: String,
})
</script>

<style lang="scss" scoped>
.feedback-item {
  padding: 10px;
  background-color: #fff; // 可根据需求调整背景颜色
  border-radius: 8px; // 可根据设计调整边框圆角大小
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%); // 轻微的阴影效果

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 8px; // 根据实际情况进行调整

    .nickname {
      margin-left: 10px; // 头像和昵称间距
      font-size: 16px;
      font-weight: bold; // 昵称加粗
    }
  }

  .info {
    .feedback-content {
      font-size: 14px;
      line-height: 1.5;
      color: #666; // 信息文字颜色
    }
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between; // 将点赞和日期分到两侧
    margin-top: 8px;

    .ml-4 {
      margin-left: 16px; // 根据实际情况调整
    }

    .mr-4 {
      margin-right: 16px; // 根据实际情况调整
      font-size: 12px;
      color: #999; // 日期文字颜色
    }
  }
}
</style>
